/**
 * @Author:高志斐
 * @Date:2020/7/15
 * @Description:这是从我的收藏列表进入的组合详情页
 */

import React,{Component} from "react";
import ReactDom from 'react-dom'
import {NavBar, Icon, Card, WingBlank, WhiteSpace, List, Tag, Tabs, Button, Badge, Toast} from "antd-mobile";
import axios from "axios";
import "../../access/css/positionlist.css"
import PortofolioRate from "../PositionList/PositionList_Component/PortofolioRate";
import ProductRate from "../PositionList/PositionList_Component/ProductRate";
import TradingInformation from "../PositionList/PositionList_Component/TradingInformation";
import ProductPorpotion from "../PositionList/PositionList_Component/ProductPorpotion";
import ProductNameGain from "../PositionList/PositionList_Component/ProductNameGain";
import BulletinBorder from "../PositionList/PositionList_Component/BulletinBorder";
import {Link} from "react-router-dom";
import BasicInformation from "../PositionList/PositionList_Component/BasicInformation";
import ProductCard from "../PositionList/PositionList_Component/ProductCard";
import Stragety from "../PositionList/PositionList_Component/Stragety";
import {URL} from "../../index";
import {getCookieId} from "../Login/Component_Login/GetCookie";
const Item = List.Item;
const tabs = [
    { title: '本组合收益率' },
    { title: '成分产品收益率' },
    //{ title: 'Third Tab' },
];

export default class CollectDetail extends Component{

    //返回图的配置对象
    constructor(props) {
        super(props);
        const comBaseId=this.props.location.state.comBaseId
        const comBaseName=this.props.location.state.comBaseName
        const conBaseStartMoney=this.props.location.state.conBaseStartMoney
        const comBaseCate=this.props.location.state.comBaseCate
        const comBaseRiskLevel=this.props.location.state.comBaseRiskLevel
        this.state={
            disabled: false,
            products:[],//总表
            isShow:false,
            data_list:[],
            comBaseId:comBaseId,//组合id
            comBaseName:comBaseName,//组合名称
            conBaseStartMoney:conBaseStartMoney,//起投金额
            comBaseCate:comBaseCate,//组合类别
            comBaseRiskLevel:comBaseRiskLevel,//组合风险等级
            isCollect:null
        }
        this.handleLeftClick=this.handleLeftClick.bind(this)
        this.loadCollect=this.loadCollect.bind(this)
    }
    //用户进行收藏和取消收藏操作的函数
    collect=() => {
        axios({
            method: "GET",
            url: URL + "/userCollect/collect",
            params: {
                comBaseId: this.state.comBaseId,
                userId:getCookieId(),
                collectState:1
            }
        }).then(res => {
            if (res.data.code === 200) {
                var colbtn=document.getElementById('collect')
                var colbtn1=document.getElementById('collect1')
                ReactDom.findDOMNode(colbtn).style.display="none"
                ReactDom.findDOMNode(colbtn1).style.display=""
                Toast.info("收藏成功！")
            }else {
                console.log(res.data)
            }
        })
    }
    cancelCollect = () =>{
        axios({
            method: "GET",
            url: URL + "/userCollect/collect",
            params: {
                comBaseId: this.state.comBaseId,
                userId:getCookieId(),
                collectState:0
            }
        }).then(res => {
            if (res.data.code === 200) {
                var colbtn=document.getElementById('collect')
                var colbtn1=document.getElementById('collect1')
                ReactDom.findDOMNode(colbtn).style.display=""
                ReactDom.findDOMNode(colbtn1).style.display="none"
                Toast.info("已取消收藏！")
            }else {
                console.log(res.data)
            }
        })
    }
    //页面加载时获取组合的收藏状态
    loadCollect(){
        axios({
            method: "GET",
            url: URL + "/userCollect/comCollectState",
            params: {
                comBaseId: this.state.comBaseId,
                userId:getCookieId(),
            }
        }).then(res => {
            if (res.data.code === 200) {
                this.setState({
                    isCollect:res.data.comCollectState
                })
                if (this.state.isCollect){
                    var colbtn=document.getElementById('collect')
                    var colbtn1=document.getElementById('collect1')
                    ReactDom.findDOMNode(colbtn).style.display="none"
                    ReactDom.findDOMNode(colbtn1).style.display=""
                }
            }else {
                console.log(res.data)
            }
        })
    }
    handleLeftClick(event){
        window.history.back(-1)
    }
    componentDidMount() {
        this.loadCollect()
    }

    render() {
        return (
            <div >
                <div style={{position:"fixed",width:"100%",zIndex:999}}>
                    {/*页面顶部*/}
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" style={{color:" #f8a83f"}}/>}
                        onLeftClick={this.handleLeftClick}
                    >{this.state.comBaseName}</NavBar>
                </div>
                <div>

                    {/*产品名card*/}
                    <ProductCard fathercomBaseId={this.state.comBaseId}/>
                    <Stragety fathercomBaseId={this.state.comBaseId}/>
                    {/*组合基本信息*/}
                    <WhiteSpace size="lg" />
                    <WhiteSpace/>
                    <Card>
                        <Card.Header
                            title="组合基本信息"
                        />
                        <Card.Body>
                            <BasicInformation fathercomBaseId={this.state.comBaseId}/>
                        </Card.Body>
                    </Card>
                    <WhiteSpace />

                    {/*组合和组合成分产品可视化*/}
                    <div >
                        <WhiteSpace />
                        <Tabs tabs={tabs} initialPage={1} animated={false} useOnPan={false}>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '300px', backgroundColor: '#fff' }}>
                                <PortofolioRate fathercomBaseId={this.state.comBaseId}/>
                            </div>
                            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '300px', backgroundColor: '#fff' }}>
                                <ProductRate fathercomBaseId={this.state.comBaseId}/>
                            </div>
                            {/*<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '250px', backgroundColor: '#fff' }}>
                            Content of third tab
                        </div>*/}
                        </Tabs>
                        <WhiteSpace/>

                    </div>

                    {/*交易信息组件*/}
                    <div>
                        <WhiteSpace size="lg" />
                        <Card>
                            <Card.Header
                                title="交易流程"
                            />
                            <Card.Body>
                                <TradingInformation/>
                            </Card.Body>
                        </Card>
                        <WhiteSpace size="lg" />
                    </div>
                    {/*交易规则*/}
                    <WhiteSpace/>
                    <List className="my-list">
                        <Item extra={<span onClick={()=>{this.props.history.push({
                            pathname:"/combineDealRule"
                        })}} style={{color:"blue"}}>查看详情
                            {/*<Link to={"/combineDealRule"} style={{color:"blue"}}> 查看详情</Link>*/}
                           </span>}
                              style={{fontSize:"2.5rem",color:"black"}}>交易规则</Item>
                    </List>
                    {/*持仓可视化*/}
                    <div>
                        <WhiteSpace size="lg" />
                        <Card>
                            <Card.Header
                                title="成分产品持仓占比"
                            />
                            <Card.Body>
                                <ProductPorpotion fathercomBaseId={this.state.comBaseId}/>
                            </Card.Body>
                        </Card>
                        <WhiteSpace size="lg" />
                    </div>
                    {/*成分产品名称*/}
                    <WhiteSpace/>
                    <Card>
                        <Card.Header
                            title="成分产品名称"
                        />
                        <Card.Body>
                            <ProductNameGain fathercomBaseId={this.state.comBaseId}/>
                        </Card.Body>
                    </Card>
                    <WhiteSpace size="lg"/>


                    {/*底部通告栏*/}
                    <BulletinBorder/>
                    {/*底部*/}
                    <Link to={{pathname:"/buyIn",
                        state:{comBaseId:this.state.comBaseId,comBaseName:this.state.comBaseName,
                            conBaseStartMoney:this.state.conBaseStartMoney,comBaseCate: this.state.comBaseCate,
                            comBaseRiskLevel:this.state.comBaseRiskLevel}}}>
                        <Button style={{width:"59%",float:"right",borderRadius:0,backgroundColor:"#f8a83f",color:"white"}}>一键购买</Button>
                    </Link>
                    <Link to={{pathname:"/userComment",state:{comBaseId:this.state.comBaseId,comBaseName: this.state.comBaseName}}}>
                        <Button  type="primary"  style={{width:"23%",float:"right",borderRadius:0}} onClick={()=>this.props.comBaseId}>讨论区</Button>
                    </Link>
                    <Button id="collect" icon={<img src={require("../../access/images/收藏.png")} alt="" />} style={{width:"18%",float:"right",borderRadius:0,border:0,display:""}} onClick={this.collect}></Button>
                    <Button id="collect1" icon={<img src={require("../../access/images/收藏 (1).png")} alt="" />} style={{width:"18%",float:"right",borderRadius:0,display:"none"}} onClick={this.cancelCollect}></Button>
                    {/*<Button id="collect1" icon={<img src={require("../../access/images/收藏 (1).png")} alt="" />} style={{width:"18%",float:"right",borderRadius:0,display:"none"}} onClick={this.userCollect(0)}></Button>*/}
                    <WhiteSpace />
                    <WhiteSpace />
                    <WhiteSpace/>
                </div>
            </div>
        );
    }
}
